<template>
	<view class="page-index">
		<view class="" style="background: #fff;position: sticky;top: 0;" v-if="token">
			<view class="content">
				<view class="tabs" :style="{ color: tabsIndex == index ? '#000' : '#666', 'font-weight': tabsIndex == index ? '700' : '400' }" v-for="(item, index) in tabsList" :key="index" @click="tableChange(item, index)">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="">
				<view class="tabs-border" :style="{ width: 100 / tabsList.length + 'vw', 'margin-left': tabsIndex * (100 / tabsList.length) + 'vw' }"><view class="borders"></view></view>
			</view>
		</view>
		<view class="orderBox">
			<view class="orderItem" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<view class="orderTop">
					<image :src="item.ddc_image||'https://ddc.jishixiu.fun/uploads/20250903/7b1cfcb8772a9fc2e96027b257cd14ce.png'" mode="" class="orderImage"></image>
					<view class="orderTopBox">
						<view class="orderInfo">
							<view class="titleBox">
								<view class="title">{{item.repair_type_name}}</view>
								<view class="status" v-if="item.deposit_pay_status==='0'">待支付</view>
								<view class="status" v-if="item.deposit_pay_status==='1'">已支付</view>
							</view>
							<view class="orderTips"></view>
						</view>
						<view class="priceBox">
							定金：
							<text style="color: #E60000;">¥{{item.deposit||0}}</text>
						</view>
					</view>
				</view>
				<view class="orderBottom">
					<view class="close" @click.stop="cancelOrder(item)">取消订单</view>
					<view class="submit" v-if="item.deposit_pay_status==='0'" @click.stop="goPay(item)">去支付</view>
				</view>
			</view>
			<view class="" style="text-align: center;margin-top: 100rpx;" v-if="loading&&list.length==0">
				<image src="https://ddc.jishixiu.fun/uploads/20250901/395e38a28bec4f9854afea61624432bf.png" mode="" style="width: 452rpx;height: 339rpx;"></image>
				<view class="">
					目前没有{{tabsList[tabsIndex].text}}订单哦
				</view>
			</view>
			<button class="loginBox" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="text-align: center;margin-top: 200rpx;" v-if="token==''">
				登录
			</button>
		</view>
	</view>
</template>

<script src="./page.js"></script>

<style scoped lang="scss">
@import 'page.scss';
</style>
